<script setup lang="ts">
import type { AthleteViewModel } from '@/api/athlete/transformer'

interface Props {
	athlete: AthleteViewModel
}

const props = defineProps<Props>()
</script>

<template>
	<div class="bg-primary rounded border border-border p-20px pb-16px">
		<!-- 头部信息 -->
		<div class="flex flex-col items-center">
			<!-- 头像 -->
			<div class="w-80px h-80px rounded-8px overflow-hidden opacity-80 mb-8px">
				<img
					:src="athlete.personPhotoFile?.filePath"
					alt="avatar"
					class="w-full h-full object-cover"
				/>
			</div>

			<!-- 基本信息 -->
			<div class="text-center">
				<div class="text-18px font-bold text-primary mb-4px">
					{{ athlete.athleteName }}
				</div>
			</div>
		</div>

		<!-- 详细信息 -->
		<div class="mt-16px space-y-12px">
			<!-- 性别 -->
			<div class="flex justify-between items-center">
				<span class="text-14px text-secondary">性别：</span>
				<span class="text-14px font-medium text-primary">
					{{ athlete.sexLabel }}
				</span>
			</div>

			<!-- 身份证号 -->
			<div
				v-if="false"
				class="flex justify-between items-center"
			>
				<span class="text-14px text-secondary">身份证号：</span>
				<span class="text-14px font-medium text-primary">
					{{ athlete.idNumber || '-' }}
				</span>
			</div>

			<!-- 注册证号 -->
			<div class="flex justify-between items-center">
				<span class="text-14px text-secondary">注册证号：</span>
				<span class="text-14px font-medium text-primary">
					{{ athlete.registerNumber || '-' }}
				</span>
			</div>

			<!-- 注册项目 -->
			<div class="flex justify-between items-center">
				<span class="text-14px text-secondary">注册项目：</span>
				<span class="text-14px font-medium text-primary">
					{{ athlete.registerProjectLabel || '-' }}
				</span>
			</div>

			<!-- 注册单位 -->
			<div class="flex justify-between items-center">
				<span class="text-14px text-secondary">注册单位：</span>
				<span class="text-14px font-medium text-primary">
					{{ athlete.registerOrgLabel || '-' }}
				</span>
			</div>

			<!-- 在训单位 -->
			<div class="flex justify-between items-center">
				<span class="text-14px text-secondary">在训单位：</span>
				<span class="text-14px font-medium text-primary">
					{{ athlete.trainOrgLabel || '-' }}
				</span>
			</div>

			<!-- 注册年度 -->
			<div class="flex justify-between items-center">
				<span class="text-14px text-secondary">注册年度：</span>
				<span class="text-14px font-medium text-primary">
					{{ athlete.registerYear || '-' }}
				</span>
			</div>
		</div>
	</div>
</template>

<style scoped>
/* 自定义标签样式 */
.custom-tag {
	height: 20px;
	padding: 0 8px;
	font-size: 12px;
	line-height: 20px;
	color: #165dff;
	background-color: #e8f3ff;
	border: none;
}

/* 图片加载失败时的占位 */
img {
	background-color: #f0f0f0;
}
img::before {
	display: block;
	width: 100%;
	height: 100%;
	content: '';
	background-color: #f0f0f0;
}
</style>
